<!DOCTYPE HTML>
<html>
	<head>
	    <meta charset="utf-8">
		<title>Dojox Calendar Test</title>
		<style type="text/css">
			@import "../../../dojo/resources/dojo.css";
			@import "../../../dijit/themes/tundra/tundra.css";
			@import "../../../dijit/themes/dijit.css";
			@import "../../../dijit/tests/css/dijitTests.css";
			@import "../Calendar/Calendar.css";

			.title {
				font-weight: bolder;
			}
		</style>

		<script type="text/javascript" src="../../../dojo/dojo.js"
        		data-dojo-config="async:1, transparentColor: [ 255, 255, 255 ]"></script>

		<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>

		<script type="text/javascript">
			require([
			    "dojo/_base/declare",
				"dojo/parser",
				"dojo/query",
				"dojox/fx/_base",
				"dojox/widget/Calendar",
				"dojo/dom",
				"dojox/widget/DailyCalendar",
				"dojox/widget/MonthAndYearlyCalendar",
				"dojox/widget/MonthlyCalendar",
				"dojox/widget/CalendarFisheye",
				"dojo/aspect",
				"dojo/domReady!"
			], function(declare, parser, query, xFx, Calendar, dom){

				declare("test/CalendarCustomFx", [Calendar], {

					addFx: function(theQuery, fromNode){
						query(theQuery, fromNode).on("mouseover", function(evt){
							xFx.highlight({node: evt.target}).play();
						});
					}
				});
				//window['log'] = function(str){
				//	dom.byId("report").innerHTML = str;
                //}
                parser.parse();
            });
		</script>
	</head>
	<body class="soria">
		<div>
			Use different theme:
			<a href="test_Calendar.html?theme=tundra">tundra</a>
			<a href="test_Calendar.html?theme=soria">soria</a>
			<a href="test_Calendar.html?theme=nihilo">nihilo</a>
		</div>
		<div id="report" style="float:left; width:100%;height:40px;color:red;font-weight:bold;"></div>

		<div>
			<span style="width:33%;float:left;">
				<div class="title">Typical Calendar usage, with day, and month/year views</div>
				<div data-dojo-type="dojox/widget/Calendar" id="cal">
					<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
						console.log("Date Value selected: " + value);
					</script>
				</div>

				<p>
				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
				magna. Sed vitae risus.
				</p>
			</span>

			<span style="width:33%;float:left;">
				<div class="title">With day only view, no month/year view</div>

				<div data-dojo-type="dojox/widget/DailyCalendar" id="calDayOnly">
					<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
						console.log("Day Value selected: " + value);
					</script>
				</div>

				<p>
				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
				magna. Sed vitae risus.
				</p>
			</span>
			<span style="width:33%;float:left;">
				<div class="title">With day only view, no month/year view</div>

				<div data-dojo-type="dojox/widget/MonthAndYearlyCalendar" id="calMonthAndYearOnly">
					<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
						console.log("Date Value selected from Month and Year Only Calendar: " + value);
					</script>
				</div>

				<p>
				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
				magna. Sed vitae risus.
				</p>
			</span>
		</div>

    <div>
			<span style="width:33%;float:left;">
				<div class="title">Typical calendar, with min/max constraints = {min:'2012-12-12',max:'2013-01-15'}</div>
				<div data-dojo-type="dojox/widget/Calendar" id="calLimits" value="2012-12-25"
						constraints="{min:'2012-12-12',max:'2013-01-15'}">
    				<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
						console.log("Date Value selected: " + value);
					</script>
				</div>

				<p>
				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
				magna. Sed vitae risus.
				</p>
			</span>
			<span style="width:33%;float:left;">
				<div class="title">Typical calendar, with min/max constraints a week before and after the current date</div>
				<div data-dojo-type="dojox/widget/Calendar" id="calLimitsWeek">
				    <script type="dojo/aspect" data-dojo-advice="before" data-dojo-method="postMixInProperties">
					    //TODO: This never gets called...
						require(["dojox/widget/Calendar", "dojo/date"], function(Calendar, date){
    						var currentDate = new Date();
    						var constraints = {
    						    min: date.add(currentDate, 'week', -1),
    							max: date.add(currentDate, 'week', +1)
    						};
    						Calendar._setConstraintsAttr(constraints);
						});
					</script>
					<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
						console.log("Date Value selected: " + value);
					</script>
				</div>

				<p>
				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
				magna. Sed vitae risus.
				</p>
			</span>
			<span style="width:33%;float:left;">
				<div class="title">Typical calendar, initial date set in HTML to December 25th, 2012</div>
				<div data-dojo-type="dojox/widget/Calendar" id="calXmas" value="2012-12-25">
					<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
						console.log("Date Value selected: " + value);
					</script>
				</div>

				<p>
				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
				magna. Sed vitae risus.
				</p>
			</span>
	 </div>

		<div>
			<span style="width:50%;float:left;">
				<div class="title">Standard calendar, with FisheyeLite effects (in development, just here to show that FX can be applied)</div>

				<div data-dojo-type="dojox/widget/CalendarFisheye" id="calFisheye">
					<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
						console.log("Date Value selected from Fisheye Calendar: " + value);
					</script>
				</div>

				<p>
				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
				magna. Sed vitae risus.
				</p>
			</span>
			<span style="width:50%;float:left;">
				<div class="title">With custom Highlighting effects (in development, just here to show that FX can be applied)</div>

				<div data-dojo-type="test/CalendarCustomFx" id="calCustomFx">
					<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
						console.log("Date Value selected in FX Calendar: " + value);
					</script>
				</div><p>
				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
				magna. Sed vitae risus.
				</p>
			</span>
		
		</div>


	</body>
</html>
